var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var tanks = new Image();
tanks.src = '../image/tanks_sheet.png';

var arr = [1, 2, 3, 4, 5, 6, 7, 8];

// 坦克的形态
var animationFrames = [1, 2, 3, 4, 5, 6, 7, 8];
var tank_v2_frames = [9, 10, 11, 12, 13, 14, 15, 16];
// 爆炸的形态
var boomFrames = [17, 18, 19];
var frameIndex = 0;


var x = 50, y = 50;

function Point(x, y){

}

function Tank(x, y){
    // 位置
    this.x = x;
    this.y = y;
    this.tankFrames = [1, 2, 3, 4, 5, 6, 7, 8];
    this.angle = ['', 0, 90, 180, 270];
    // 默认是向上
    this.direction = 1;
    this.sourceX = Math.floor(animationFrames[frameIndex] % 8) * 32;
    this.sourceY = Math.floor(animationFrames[frameIndex] / 8) * 32;
    this.run = function(){
        // 坦克形态
        this.sourceX = Math.floor(animationFrames[frameIndex] % 8) * 32;
        this.sourceY = Math.floor(animationFrames[frameIndex] / 8) * 32;
        // 转向
        context.save();
        context.translate(this.x+16, this.y+16);
        var angleInRedians = this.angle[this.direction] * Math.PI / 180;
        context.rotate(angleInRedians);
        context.drawImage(tanks, this.sourceX, this.sourceY, 32, 32, -16, -16, 32, 32);
        context.restore();
    };
    // 转向
    this.turnLeft = function(direction){
        switch(direction) {
            case 'w':
                this.direction = 1;
                break;
            case 'd':
                this.direction = 2;
                break;
            case 's':
                this.direction = 3;
                break;
            case 'a':
                this.direction = 4;
                break;
        }
    };

    // 前进
    this.goForward = function(){
        // 一次前进一格，需要根据方向进行判断
        switch(this.direction) {
            case 1:
                // 向上
                if (this.y < 1) {
                    break;
                }
                this.y -= 1;
                break;
            case 2:
                // 向右
                if (this.x < 33) {
                    break;
                }
                this.x += 1;
                break;
            case 3:
                // 向下
                if(this.y > 499) {
                    break;
                }
                this.y += 1;
                break;
            case 4:
                // 向左
                if (this.x < 1) {
                    break;
                }
                this.x -= 1;
                break;
        }

    }
}


var tank = new Tank(100, 100);
(function(){
    tanks.onload = function(){

        run();
    };

})();

function run(){
    var x = window.setInterval("draw()", 100);
}

function draw(){
    console.log(frameIndex);
    frameIndex = frameIndex % 8;
    context.fillStyle = "#000000";
    context.fillRect(0, 0, 500, 500);

    tank.run();
    if (frameIndex % 100 === 0) {
        var arr = ['a', 's', 'd', 'w'];

        tank.turnLeft(arr[Math.floor(Math.random().toFixed(2) * 4)]);
        console.log(Math.floor(Math.random().toFixed(2) * 4));
    }
    tank.goForward();
    frameIndex ++;
}

function tankV1(frameIndex, dx, dy){
    x += dx;
    y += dy;
    if (x < 0) {
        x = 0;
    }

    if (y < 0) {
        y = 0;
    }

    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.translate(x+16, y+16);
    var angleInRedians = angle[frameIndex % angle.length] * Math.PI / 180;
    context.rotate(angleInRedians);


    frameIndex = frameIndex % animationFrames.length;
    // 坦克形态
    var sourceX = Math.floor(animationFrames[frameIndex] % 8) * 32;
    var sourceY = Math.floor(animationFrames[frameIndex] / 8) * 32;
    // context.drawImage(tanks, sourceX, sourceY, 32, 32, x, y, 32, 32);
    context.drawImage(tanks, sourceX, sourceY, 32, 32, -16, -16, 32, 32);
    context.restore();

}

function tankV2(frameIndex){
    frameIndex = frameIndex % tank_v2_frames.length;
    // 坦克进化形态
    var sourceX = Math.floor(tank_v2_frames[frameIndex] % 8) * 32;
    var sourceY = Math.floor(tank_v2_frames[frameIndex] / 8) * 32;
    context.drawImage(tanks, sourceX, sourceY, 32, 32, 100, 50, 32, 32);
}

function boom(frameIndex){
    frameIndex = frameIndex % boomFrames.length;
    // 爆炸形态
    var sourceX = Math.floor(boomFrames[frameIndex] % 8) * 32;
    var sourceY = Math.floor(boomFrames[frameIndex] / 8) * 32;
    console.log('x:' + sourceX + ' y:' + sourceY);
    context.drawImage(tanks, sourceX, sourceY, 32, 32, 100, 100, 32, 32);
}